<template>
  <div>
    <HeadView />
    <div class="search_box">
      <el-input v-model="input" @keyup.enter="onSearch()" class="s_input" placeholder="Search" size="large">
        <template #prefix>
          <el-icon class="el-input__icon"><Search /></el-icon>
        </template>
      </el-input>
      <div @click="onSearch()" class="connect">Search</div>
    </div>
    <p v-if="err" class="err_text">{{err}}</p>
    <h3>Search results for “{{this.title && this.title.toLocaleLowerCase()}}”</h3>

    <FavView v-if="title !== ''" :title="title && title.toLocaleLowerCase()" :key="theKey" />
    <LinkView />
  </div>
</template>

<script>
// import { ElMessage } from 'element-plus'
import HeadView from '@/components/HeadView.vue'
import { Search } from '@element-plus/icons'
import FavView from '@/components/FavView.vue'
import LinkView from '@/components/LinkView.vue'

export default {
  data(){
    return {
      input:'',
      title:'',
      err:null,
      theKey:null
    }
  },
  mounted(){
    if(this.$route.query.id){
      this.input = this.$route.query.id
      this.title = this.$route.query.id
    }
  },
  methods:{
    onSearch(){
      let re =  /^[0-9a-zA-Z]*$/;
      if(this.input == '' || null){
        // ElMessage.error('')
        this.err = 'Input Null , Please input'
        return
      }if (!re.test(this.input)){
        this.err = 'Only numbers and letters are allowed'
        // ElMessage.error('Only numbers and letters are allowed')
        return
      }else{
        this.err = null
        this.$router.push({path:'/search',query: {id:this.input}})
      }
    },
  },
  watch: {
		'$route' () { //监听URL地址栏参数变化
      // console.log(this.$route.query.id)
      this.theKey = location.hash
			this.title = this.$route.query.id
      // window.location.reload()
		}
	},
  components: {
    Search,
    FavView,
    HeadView,
    LinkView
  }
}
</script>

<style lang='less' scoped>
    .err_text{
      text-align: center;
      color: #E94F4D;
      margin-top: 10px;
    }
</style>